<template>
  <div>
    <el-group-title class="ccui-group-wrapper d_jump" index="contract">
      <template slot="groupTitle">
        <el-form
          :model="form"
          :rules="rules"
          ref="form2"
          label-width="160px"
          class="ccui-form"
          style="overflow: visible"
        >
          <div class="extend-btn">
            <el-upload
              :show-file-list="false"
              :action="uploadUrl"
              class="upload-demo tow"
              :before-upload="beforeAvatarUpload"
              :on-success="onSuccess"
              :on-progress="onProgress"
              :on-error="onError"
              :headers="headers"
              multiple
            >
              <el-button
                v-if="$route.query.status !== '查看'"
                plain
                type="single-number"
                >上传附件</el-button
              >
            </el-upload>
          </div>
          <el-table
            :data="tableData"
            style="margin-bottom: 20px; width: 100%; margin-top: 38px"
            border
            max-height="99999"
            class="ccui-form-child-table"
            :header-cell-class-name="headerMandatory"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="序号"
              type="index"
              min-width="20%"
              height="36px"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileName"
              label="文件名称"
              min-width="140%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileSize"
              label="文件大小"
              min-width="70%"
              :formatter="fileSizeFormatter"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="uploadTime"
              label="上传时间"
              min-width="70%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              width="200"
              prop="fileDesc"
              label="附件说明"
            >
              <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.fileDesc"
                  maxlength="1000"
                  show-word-limit
                />
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="操作"
              align="left"
              min-width="70%"
            >
              <template slot-scope="scope">
                <span
                  style="color: #0089ef; cursor: pointer"
                  @click="deleteAppend(scope.$index)"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
import { mapGetters } from "vuex";
export default {
  name: "attachment",
  data() {
    return {
      form: {
        textName: "", //合同附件里的文件名称
        txtlarge: "", //合同附件里的文件大小
        priceRegion: "", //财务信息里的价格地区
        taxMethod: "", //计税方法
        taxType: "", //发票类型
        placeSign: "", //签订地点
        numberCopies: "", //合同份数
        phonePerson: "", //对方联系人
        taxpayer: "", //供应商纳税人类型
        materialSources: "", //物资来源
        paymentCoefficient: "", //支付系数
        advanceCharge: "", //预付款
        titleAccount: "", //账户名称
        accountNumber: "", //开户行账号
        accountName: "", //开户行名称
        fileArr: []
      },
      rules: {},
      tableData: [],
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || ""
      }
    };
  },
  props: {
    fileArrs: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    fileArrs: {
      handler(n) {
        this.tableData = n;
      },
      immediate:true
    },
    tableData: {
      handler(n) {
        let arr = [];
        n.forEach((item, index) => {
          const obj = {
            sn: index,
            uploadTime: item.uploadTime,
            fileDesc: item.fileDesc,
            uploadId: item.uploadId
          };
          arr.push(obj);
        });
        this.$emit("fileIdArr", arr);
      },
      deep:true,
      immediate: true
    }
  },
  // mounted() {
  //   this.tableData = this.fileArrs;
  // },
  methods: {
    onProgress() {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    onSuccess(res) {
      let fileData = res.data[0];
      this.tableData.push({
        fileDesc: "",
        uploadId: fileData.uploadId,
        fileName: fileData.fileName,
        fileSize: fileData.fileSize,
        // fileSize: Math.round(fileData.fileSize / 1024) + "kb",
        uploadTime: fileData.createTime
      });
      this.form.fileArr.push(fileData.uploadId);
      this.form.fileArr = [...new Set(this.form.fileArr)];

      this.uploadLoading.close();
    },
    onError() {
      this.uploadLoading.close();
    },
    beforeAvatarUpload(file) {
      const isLt50 = file.size < 52428800;
      var testmsg = file.name.substring(file.name.lastIndexOf("."));
      let fileType = this.getUploadFileRules.includes(testmsg);
      if (!isLt50) {
        this.$showErrorMessage("文件大小不超过50M!");
      }
      if (file.size === 0) {
        this.$message({
          showClose: true,
          message: "文件大小不可为0B!",
          type: "error",
          ccuiCustom: true,
          duration: 0
        });
      }
      if (!fileType) {
        this.$showErrorMessage("上传文件格式错误");
      }
      return isLt50 && fileType && file.size > 0;
    },
    deleteAppend(index) {
      this.tableData.splice(index, 1);
      this.form.fileArr.splice(index, 1);
    },
    headerMandatory(data) {
      if (
        data.columnIndex == 1 ||
        data.columnIndex == 2 ||
        data.columnIndex == 3
      ) {
        return "headerMandatory";
      }
    },
    // 表单验证定位
    positionFrom() {
      return new Promise((resolve, reject) => {
        if (this.tableData.length < 1) {
          reject({ tabLabel: "附件信息", isFocus: "third" });
          this.$showErrorMessage("请上传附件");
          return;
        }
        resolve("成功");
      });
    },
    fileSizeFormatter(row) {
      return Math.round(row.fileSize / 1024) + "kb";
    }
  },
  computed: {
    ...mapGetters(["getUploadFileRules"])
  }
};
</script>

<style scoped lang="scss">
/deep/.ccui-form .ccui-form-child-table.el-table th{
  line-height: normal;
}
/deep/.el-table {
  /deep/th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }
  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
/deep/ .el-table th.headerMandatory > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}

/deep/.el-group-title.ccui-group-wrapper .extend-btn {
  display: flex;
  width: 95;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
